<template>
  <a-form ref="pwdRef" :model="user" :rules="rules" label-width="80px" layout="vertical">
    <a-form-item label="旧密码" field="oldPassword">
      <a-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password/>
    </a-form-item>
    <a-form-item label="新密码" field="newPassword">
      <a-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password/>
    </a-form-item>
    <a-form-item label="确认密码" field="confirmPassword">
      <a-input v-model="user.confirmPassword" placeholder="请确认密码" type="password" show-password/>
    </a-form-item>
    <a-form-item>
      <a-row :gutter="10">
        <a-col :span="1.5">
          <a-button type="primary" @click="submit">保存</a-button>
        </a-col>
        <a-col :span="1.5">
          <a-button type="primary" status="danger" @click="close">关闭</a-button>
        </a-col>
      </a-row>
    </a-form-item>
  </a-form>
</template>

<script setup>
import {updateUserPwd} from "@/api/system/user";
import {getCurrentInstance, reactive} from "vue";

const {proxy} = getCurrentInstance();

const user = reactive({
  oldPassword: undefined,
  newPassword: undefined,
  confirmPassword: undefined
});

const equalToPassword = (value, callback) => {
  if (user.newPassword !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};
const rules = ref({
  oldPassword: [{required: true, message: "旧密码不能为空", trigger: "blur"}],
  newPassword: [
    {required: true, message: "新密码不能为空", trigger: "blur"},
    {
      match: RegExp('^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!#$%^&*])[\\da-zA-Z!#$%^&*]{8,16}$'),
      message: '用户密码长度必须介于8和16之间且包含数字,大小写字母,特殊字符',
      trigger: "blur"
    },
  ],
  confirmPassword: [{required: true, message: "确认密码不能为空", trigger: "blur"}, {
    required: true,
    validator: equalToPassword,
    trigger: "blur"
  }]
});

/** 提交按钮 */
function submit() {
  proxy.$refs.pwdRef.validate(valid => {
    if (!valid) {
      updateUserPwd(user.oldPassword, user.newPassword).then(response => {
        proxy.$message.success("修改成功");
      });
    }
  });
};

/** 关闭按钮 */
function close() {
  proxy.$tab.closePage();
};
</script>
